<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="aa">
      <span>发射点发射点</span>
    </div>
    <canvas id="demoCanvas" width="300" height="300"></canvas>
    <canvas id="demoCanvasTwo" width="300" height="300"></canvas>
  </div>
</template>
<script setup lang="ts">
  const init = () => {
    var stage = new createjs.Stage('demoCanvas')
    var circle = new createjs.Shape()
    circle.graphics.beginFill('DeepSkyBlue').drawCircle(0, 0, 50)
    circle.x = 100
    circle.y = 100
    stage.addChild(circle)
    stage.update()
    createjs.Tween.get(circle, { loop: true })
      .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
      .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
      .to({ alpha: 0, y: 225 }, 100)
      .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
      .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2))
    createjs.Ticker.setFPS(300)
    createjs.Ticker.addEventListener('tick', stage)
  }
  const demoCanvasTwo = () => {
    var stage = new createjs.Stage('demoCanvasTwo')
    var box = new createjs.Shape()
    box.graphics.beginLinearGradientFill(
      ['#ff0000', '#eefeee'],
      [0, 1],
      0,
      0,
      0,
      100
    )
    box.graphics.drawRect(0, 0, 100, 100)
    box.cache(0, 0, 100, 100)

    var bmp = new createjs.Bitmap(
      'https://oss.kuke99.com/upload_files/new6/classroom/20240322/dee1fcc7581ebcf5dc027159f79deb45.jpg'
    )
    bmp.filters = [new createjs.AlphaMapFilter(box.cacheCanvas)]
    bmp.filterBounds = bmp.getBounds()
    bmp.cache(0, 0, 100, 100)

    // stage.addChild(box);
    stage.addChild(bmp)
    stage.update()
  }
  onMounted(() => {
    nextTick(() => {
      init()
      demoCanvasTwo()
    })
  })
</script>
<style lang="scss" scoped>
  .aa {
    border-color: red;
    width: 720px;

    span {
      color: aqua;
      font-size: 38px;
    }
  }
</style>
